import React, {useState} from 'react'
import DefaultTeamIcon from '../../../../../../res/images/web/shared/touxiang@2x.png'
import {ICON_URL_PREFIX} from "../../../../../../redux/game";


const TeamAvatar = props => {

    let [err, setErr] = useState(false)
    let imgSrc

    const iconUrl = props.iconUrl

    if (iconUrl === '') {
        imgSrc = DefaultTeamIcon
    } else {
        imgSrc = ICON_URL_PREFIX + iconUrl
    }

    if (props.noPrefix && iconUrl !== '') {
        imgSrc = iconUrl
    }

    const imgOnError = () => {
        imgSrc = DefaultTeamIcon
        setErr(true)
    }

    const imgOnLoad = () => {
        // console.log('load')
    }

    const atTop = props.atTop
    const template = (
        <div
            // className='game-room-vs-player-avatar'
            className={atTop
                ? 'game-room-vs-player-avatar'
                : 'game-room-vs-player-avatar game-room-vs-player-avatar-shrink'
            }
            style={{...props.style}}

        >
            <img
                src={err ? DefaultTeamIcon : imgSrc}
                alt=''
                onLoad={imgOnLoad}
                onError={imgOnError}
            />
        </div>
    )

    return template
}

export default TeamAvatar
